<template>
  <div>
    <Title subTitle="排水证商家"></Title>

    <div class="up-view">
      <div class="toptitle flex-row align-center">
        <div class="top-item-seq">序号</div>
        <div class="top-item-name">商家</div>
        <div class="top-item-tip">到期预警</div>
      </div>
      <vue-seamless-scroll :data="dataList"
                           :class-option="classOption"
                           class="up-scroll-view">
        <div v-for="(item, index) in dataList"
             :key="index"
             class="td-row flex-row align-center">
          <div class="td-item-seq">
            <div class="td-item-seq-flag">
              {{ item.seq }}
            </div>

          </div>
          <div class="td-item-name">{{ item.merchant.merchant_name }}</div>
          <div class="td-item-tip flex-row align-center">
            <span class="td-dot"></span>
            <span> {{ item.tip }}</span>

          </div>
        </div>
      </vue-seamless-scroll>
    </div>

  </div>
</template>

<script>
import Title from '@/components/Title.vue'
import vueSeamlessScroll from "vue-seamless-scroll"
import { apiGetDrainageCertificateWarning } from '@/api/api'
export default {
  components: {
    Title, vueSeamlessScroll
  },
  data () {
    return {
      dataList: [
        // { seq: 1, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余2天' },
        // { seq: 2, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余3天' },
        // { seq: 3, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余4天' },
        // { seq: 4, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余8天' },
        // // { seq: 5, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余4天' },
        // // { seq: 6, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余3天' },
        // // { seq: 7, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余15天' },
        // // { seq: 8, car: '浙H26D98', name: '金华银行股份有限公司浦江支行 金华银行股', tip: '剩余10天' },

      ],
      classOption: {
        step: 0.25, // 数值越大速度滚动越快
        //limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      },
    }
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      apiGetDrainageCertificateWarning().then((res) => {
        this.dataList = res.data.map((item, index) => {
          return {
            seq: index + 1,
            ...item,
            tip:`剩余${item.expire_diff_days}天`
          }
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.up-view {
  margin-top: 12px;
  position: relative;
  width: 100%;
  height: 138px;
  overflow: hidden;
  color: #fff;

  .toptitle {
    // width: 100%;
    margin-left: 17px;
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    color: #e6f7ff;

    .top-item-seq {
      width: 50px;
    }
    .top-item-name {
      width: 243px;
    }

    .top-item-tip {
      width: 104px;
    }
  }

  .up-scroll-view {
    margin-top: 6px;
    height: 105px;
    overflow: hidden;
    color: #fff;

    .td-row {
      // width: 100%;
      margin-top: 4px;
      background: url('@/assets/images/item-scroll.png') no-repeat;
      background-size: 100% 100%;
      width: 414px;
      height: 32px;
      line-height: 32px;
      font-size: 15px;
      color: #e6f7ff;
      padding-left: 17px;
      .td-item-seq {
        width: 50px;

        .td-item-seq-flag {
          font-size: 14px;
          text-align: center;
          line-height: 15px;
          width: 15px;
          height: 15px;
          background: #3796e6;
          box-shadow: -3px -3px 0px #3796e680;
        }
      }

      .td-item-car {
        width: 112px;
      }
      .td-item-name {
        padding-right: 10px;
        width: 233px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .td-item-tip {
        width: 105px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .td-dot {
          width: 6px;
          height: 6px;
          background: #f25f5f;
          border-radius: 50%;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>